<template>
    <el-container style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
    <Aside :collapse="asideSettings.isCollapse" :width="asideSettings.width"></Aside>
    <el-container style="height: 100vh;width:100%;display: flex;flex-direction: column;">
      <Header :isCollapse="asideSettings.isCollapse"  @changeAside="changeAside"></Header>
      <el-main>
        <div>
         <el-card>
          <h1>代码生成器v1.0.0</h1>
         </el-card>
         <el-card style="margin-top: 10px;">
          <el-button type="primary">从数据库中导入</el-button>
          <xcg-table class="table" :Columns="Columns" :buttonData="buttonData" :tableData="tableData" ></xcg-table>
         </el-card>
         
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script lang="ts" setup>
  import { ref, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import xcgTable from '@/components/xcgtable/xcg-table.vue';
  // 组件注册
  import Header from '@/components/Header.vue'
  import Aside from '@/components/Aside.vue'



    const asideSettings = ref({
        isCollapse:true,
        width:'200'
    })
    // 给子组件绑定事件，通过子组件emit从而改变父组件的值
const changeAside = ()=>{
   asideSettings.value.isCollapse = !asideSettings.value.isCollapse
   if(asideSettings.value.isCollapse){
    asideSettings.value.width = "64"
   }else{
    asideSettings.value.width = "200"
   }
}
let tableData = ref([
    {
        "id": "1",
        "name": "tbl_test",
        "type": "table",
        "comment": "测试表",
        "row_count": "3"
    },
    {
        "id": "2",
        "name": "view_test",
        "type": "view",
        "comment": "测试视图",
        "row_count": "1"
    },
]);
let buttonData = ref([
    {
        "id": 1,
        "type": "primary",
        "name": "生成代码"
    },
    {
        "id": 2,
        "type": "danger",
        "name": "删除配置"
    }
]);
let Columns = ref([
    {
        "key": "id",
        "prop": "id",
        "label": "id",
        "fixed": true,
        "type": "String",
        "width": 100,
        "sortable": true
    },
    {
        "key": "name",
        "prop": "name",
        "label": "表名",
        "fixed": false,
        "type": "String",
        "width": 100,
        "sortable": false
    },
    {
        "key": "type",
        "prop": "type",
        "label": "类型",
        "fixed": false,
        "type": "String",
        "width": 100,
        "sortable": false
    },
    {
        "key": "comment",
        "prop": "comment",
        "label": "描述",
        "fixed": false,
        "type": "String",
        "width": 200,
        "sortable": false
    },
    {
        "key": "row_count",
        "prop": "row_count",
        "label": "行数",
        "fixed": false,
        "type": "String",
        "width": 200,
        "sortable": true
    }
]);

</script>
  <style scoped>

</style>
  